<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="plugins/vue/vue.js"></script>
    <script src="plugins/axios/axios.min.js"></script>
    <script src="plugins/util.js"></script>
</head>
<body>
    <div id="app">
        <button type="button" @click="add()">添加</button>
        名称搜索：<input type="text" v-model="input" @keyup.enter.native="handleQuery">
        <button type="button" @click="qc(page=1)" >搜索</button>
        <table border="1">
            <tr align="center">
                <td>ID</td>
                <td>user_id</td>
                <td>名称</td>
                <td>价格</td>
                <td>数量</td>
                <td>购买人</td>
                <td>地区</td>
                <td>操作</td>
            </tr>
            <tr v-for="n in name.records"  align="center">
                <td>{{n.id}}</td>
                <td>{{n.userId}}</td>
                <td>{{n.name}}</td>
                <td>{{n.price}}</td>
                <td>{{n.num}}</td>
                <td>{{n.user.username}}</td>
                <td>{{n.user.address}}</td>

                <td>
                    <button type="button" @click="del(n.id)">删除</button>
                    <button type="button" @click="hx(n.id)">修改</button>
                </td>
            </tr>
        </table>
        <button type="button" @click="qc(page=1)">首页</button>
        <button type="button" @click="qc(page=name.current-1)" >上页</button>
        <button type="button" @click="qc(page=name.current+1)" >下页</button>
        <button type="button" @click="qc(page=name.pages)" >首页</button>

    </div>

<script>
    new Vue({
        el:"#app",
        data:{
            name:{},
            pagesize: 2,
            page:1,
            input:""
        },
        methods:{
            hx(id){
              location.href="update.html?id="+id
            },
            add(){
                location.href="add.html"
            },
            del(id){
                axios.get("/order/del?id="+id).then(
                    res=>{
                       alert("删除成功")
                        location.href="index.html"
                    }
                )
            },
            all(){
                axios.get("/order/hx?id=101").then(
                    res=>{

                        this.name=res.data
                    }
                )
            },
            handleQuery(){
                this.page=1
                this.qc()
            },
            qc(){
                axios.get("/order/allqc?page="+this.page+"&pageSize="+this.pagesize+"&input="+this.input).then(
                    res=>{
                        this.name=res.data
                    }
                )
            }
        },
        created(){
            // this.all()
            this.qc()
        }

    })
</script>
</body>
</html>